<template>
  <div class="rating-container">
    <section class="rating-star grayfill">
      <icon-svg
        icon-class="iconxingxing1"
        v-for="num in 5"
        :key="num"
      ></icon-svg>
    </section>
    <div class="overlayer" :style="'width:' + (rating * 2) / 5 + 'rem'">
      <section class="rating-star yellowfill">
        <icon-svg
          icon-class="iconxingxing1"
          v-for="num in 5"
          :key="num"
        ></icon-svg>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: ["rating"],
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped lang='scss'>
.rating-container {
  position: relative;

  width: 2rem;

  .rating-star {
    display: flex;

    position: absolute;
    top: .05rem;

    font-size: .4rem;
  }

  .overlayer {
    overflow: hidden;

    position: relative;

    height: .5rem;
  }

  .grayfill {
    color: #d1d1d1;
  }

  .yellowfill {
    color: #ff9a0d;
  }
}

</style>
